<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div class="card content-box">
    <span class="text"> 部门管理</span>

    <el-button type="success" @click="add_ins = true" style="margin-left: -90%">添加机构</el-button>
    <!--展示机构列表-->
    <el-table :data="institutions" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column label="机构名称" prop="institutionName"></el-table-column>
      <el-table-column label="机构编号" prop="institutionId"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button type="primary" @click="getDeps(row.institutionId)" :icon="Search" circle></el-button>
          <el-button type="primary" @click="getInstitution(row.institutionId)" :icon="Edit" circle></el-button>
          <el-button type="danger" @click="delInstitution(row.institutionId)" :icon="Delete" circle />
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="空空如也" />
      </template>
    </el-table>
  </div>

  <!--机构到部门抽屉-->
  <!--部门抽屉-->
  <el-drawer v-model="show_deps" size="60%">
    <div>
      <!--机构信息-->
      <el-card style="max-width: 100%">
        <template #header>{{ institution.institutionName }}</template>
        <div class="common-layout">
          <el-container>
            <el-aside width="20%">
              <img class="Product-image" src="@/assets/images/ins.png" />
            </el-aside>
            <el-main>
              <el-descriptions title="" :column="3" border>
                <el-descriptions-item label="CategoryID" label-align="right">
                  {{ institution.institutionId }}
                </el-descriptions-item>
                <el-descriptions-item label="机构名称" label-align="right" align="center">
                  {{ institution.institutionName }}
                </el-descriptions-item>
                <el-descriptions-item label="机构描述" label-align="right" align="center">
                  {{ institution.description }}
                </el-descriptions-item>
              </el-descriptions>
            </el-main>
          </el-container>
        </div>
      </el-card>
      <el-button type="success" @click="add_dep = true">添加部门</el-button>

      <el-card class="page-container">
        <el-table :data="deps" style="width: 100%">
          <el-table-column label="序号" width="100" type="index"> </el-table-column>
          <el-table-column label="部门编号" prop="departmentId"></el-table-column>
          <el-table-column label="部门名称" prop="departmentName"></el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-button type="primary" @click="getDep(row.departmentId)" :icon="Edit" circle></el-button>
              <el-button type="danger" @click="delDep(row.departmentId)" :icon="Delete" circle />
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="空空如也" />
          </template>
        </el-table>
      </el-card>
    </div>

    <div>
      <!--修改部门抽屉-->
      <el-drawer v-model="show_depDetail" title="部门详情" :append-to-body="true" size="50%">
        <!-- 修改表单 -->
        <el-form :model="dep" label-width="100px">
          <el-form-item label="部门编号">{{ dep.departmentId }}</el-form-item>
          <el-form-item label="机构编号">
            <el-input v-model="depForm.institutionId" placeholder="请输入机构编号"></el-input>
          </el-form-item>
          <el-form-item label="部门名称">
            <el-input v-model="depForm.departmentName" placeholder="请输入部门名称"></el-input>
          </el-form-item>
          <el-form-item label="部门描述">
            <el-input v-model="depForm.description" placeholder="请输入描述"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="editDep(dep.departmentId)">修改</el-button>
            <el-button type="info" @click="show_depDetail = false">退出</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </el-drawer>

  <!--机构修改抽屉-->
  <el-drawer v-model="show_insDetail" title="机构信息" :append-to-body="true" size="50%">
    <!-- 修改表单 -->
    <el-form :model="insForm" label-width="100px">
      <el-form-item label="机构编号">
        {{ institution.institutionId }}
      </el-form-item>
      <el-form-item label="机构名称">
        <el-input v-model="insForm.institutionName" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="机构描述">
        <el-input v-model="insForm.description" placeholder="请输入描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editInstitution">修改</el-button>
        <el-button type="info" @click="show_insDetail = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

  <!-- 添加机构弹窗 -->
  <el-dialog v-model="add_ins" width="40%">
    <el-form :model="insForm" label-width="130px" style="padding-right: 30px">
      <el-form-item label="机构名称">
        <el-input v-model="insForm.institutionName"></el-input>
      </el-form-item>
      <el-form-item label="机构描述">
        <el-input v-model="insForm.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="add_ins = false">取消</el-button>
        <el-button type="primary" @click="addInstitution"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 添加部门弹窗 -->
  <el-dialog v-model="add_dep" width="40%">
    <el-form :model="depForm" label-width="130px" style="padding-right: 30px">
      <el-form-item label="部门名称">
        <el-input v-model="depForm.departmentName"></el-input>
      </el-form-item>
      <el-form-item label="部门描述">
        <el-input v-model="depForm.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="add_dep = false">取消</el-button>
        <el-button type="primary" @click="addDep"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!--展示机构详情抽屉-->
</template>

<script setup lang="ts" name="departmentManage">
import { onMounted, ref } from "vue";
import { Delete, Search, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import {
  getAllInstitutionService,
  getInstutitionService,
  addInstitutionService,
  editInstitutionService,
  delInstitutionService,
  getDepService,
  getDepsService,
  delDepService,
  editDepService
} from "@/api/backoffice/institution";

//控制变量
const show_insDetail = ref(false);
const show_deps = ref(false);
const show_depDetail = ref(false);
const add_ins = ref(false);
const add_dep = ref(false);
//数据模型
//机构
const institutions = ref([
  {
    institutionName: "string",
    description: "string",
    institutionId: 0
  }
]);

const institution = ref({
  institutionName: "string",
  description: "string",
  institutionId: 0
});

const insForm = ref({
  institutionName: "",
  description: ""
});

//获取所有机构
const getInstitutions = async () => {
  let result = await getAllInstitutionService();
  console.log(result.data);
  institutions.value = result.data.data;
  console.log(institutions.value);
};

//加载自动调用
getInstitutions();
onMounted(getInstitutions);

//获取单个机构
const getInstitution = async institutionId => {
  let result = await getInstutitionService(institutionId);
  institution.value = result.data;
  show_deps.value = true;
  console.log(institution.value);
};

//添加机构
const addInstitution = async () => {
  await addInstitutionService(insForm.value);
  getInstitutions();
  ElMessage.success("操作成功");
  add_ins.value = false;
};

//删除机构
const delInstitution = async institutionId => {
  await delInstitutionService(institutionId);
  getInstitutions();
  ElMessage.success("操作成功");
};

//修改机构
const editInstitution = async () => {
  let DataObj = {
    institutionid: institution.value.institutionId,
    institutionName: insForm.value.institutionName,
    description: insForm.value.description
  };
  await editInstitutionService(DataObj);
  ElMessage.success("操作成功");
  //操作后重新加载详情
  getInstitution(DataObj.institutionid);
};

//部门数据模型
const deps = ref([
  {
    departmentName: "",
    description: "",
    institutionId: "",
    departmentId: ""
  }
]);

const dep = ref({
  departmentName: "",
  description: "",
  institutionId: "",
  departmentId: ""
});

const depForm = ref({
  departmentName: "",
  description: "",
  institutionId: ""
});

//根据机构查询部门
const getDeps = async institutionId => {
  let result = await getDepsService(institutionId);
  deps.value = result.data;
};

//查询单个
const getDep = async depId => {
  let DataObj = {
    institutionId: institution.value.institutionId,
    departmentId: depId
  };
  let result = await getDepService(DataObj);
  dep.value = result.data;
  depForm.value = dep.value;
  show_depDetail.value = true;
};

//添加部门
const addDep = async () => {
  let DataObj = {
    institutionId: institution.value.institutionId,
    departmentName: depForm.value.departmentName,
    description: depForm.value.description
  };
  await getDeps(DataObj);
  ElMessage.success("操作成功");
  getDeps(institution.value.institutionId);
  add_dep.value = false;
};

//删除
const delDep = async depId => {
  let DataObj = {
    institutionId: institution.value.institutionId,
    departmentId: depId
  };
  await delDepService(DataObj);
  ElMessage("操作成功");
  getDeps(DataObj.institutionId);
};

//修改部门
const editDep = async depId => {
  let DataObj = {
    institutionId: institution.value.institutionId,
    departmentId: depId,
    departmentName: depForm.value.departmentName,
    description: depForm.value.description
  };
  await editDepService(DataObj);
  ElMessage.success("操作成功");
  show_depDetail.value = false;
  getDep(DataObj.departmentId);
};
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.demo-tabs {
  margin-top: -20px;
}
.topadd {
  position: absolute;
  top: 73px;
  right: 40px;
}
.page-container {
  box-sizing: border-box;
  min-height: 100%;
}
.add {
  position: absolute;
  top: 80%;
  right: 3%;
  float: left;
  width: 60px;
  height: 60px;
  font-size: 50px;
  font-weight: 600;
  border-radius: 50%;
}
.inneradd {
  position: absolute;
  top: 55px;
  right: 30px;
  float: left;
  font-weight: 900;
}
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #060707;
  text-align: center;
}
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}
.Product-image {
  width: auto; /* 图片宽度自适应 */
  max-width: 100%; /* 图片最大宽度为其容器的100% */
  height: auto; /* 图片高度自适应 */
  max-height: 100%; /* 图片最大高度为其容器的100% */
}
</style>
